<template>
	<view class="home">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in swiperList" :key="item.id">
				<view class="swiper-item">
					<image :src="item.imgUrl" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- banner快捷导航 -->
		<view class="banner">
			<BannerItem color="blue" tp=1 type="calendar" title="最新动态" url="/subPackage/RecentlyNews/RecentlyNews"></BannerItem>
			<BannerItem color="red" tp=1 type="person" title="服务介绍" url="/subPackage/ServiceIntro/ServiceIntro"></BannerItem>
			<BannerItem color="purple" tp=2 type="search" title="家政员预约" @click="go" url="/pages/preOrder/preOrder"></BannerItem>
			<BannerItem color="orange" tp=1 type="info" title="关于我们" url="/subPackage/About/About"></BannerItem>
		</view>
		<!-- 家政推荐 -->
		<view class="recommend">
			<view class="title-bar">
				<text class="title">家政推荐</text>
				<text class="" @click="goMore">更多 <text class="iconfont icon-gengduo1"></text> </text>
			</view>
			<scroll-view  scroll-x="true">
				
				<view class="list">
					<view class="rec-item" v-for="item in recommendList" :key="item.id" @click="goDetail(item.id)">
						<image :src="item.avatar" mode=""></image>
						<view class="">
							{{ item.username }}
						</view>
					</view>
					
					
				</view>
			</scroll-view>
		</view>
		
		<!-- 最新动态-->
		<view class="recently">
			<view class="title-bar">
				<text class="title">最新动态</text>
				<text class="" @click="getMore">更多 <text class="iconfont icon-gengduo1"></text> </text>
			</view>
			<view class="re-item" v-for="item in newsList" :key="item.id" @click="goDetails(item.id)">
				<image :src="item.cover" mode=""></image>
				<view class="right">
					<view class="title">
						{{item.title}}
					</view>
					<text class="content">
						{{ item.content }}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList:[],
				recommendList:[],
				newsList:[]
			};
		},
		methods:{
			go(){
				this.$emit('goTab')
				console.log('gg')
				// uni.switchTab({
				// 	url:url
				// })
			},
			getMores(){
				console.log('111')
			},
			async getSwiperList(){
				const {data:res} = await uni.$http.get('/api/swiper')
				console.log(res,'res')
				this.swiperList = res.data
			},
			async getRecommendList(){
				const {data:res} = await uni.$http.get('/api/recommend')
				console.log(res,'res')
				this.recommendList = res.data
			},
			async getNewsList(){
				const {data:res} = await uni.$http.get('/api/news')
				console.log(res,'res')
				this.newsList = res.data.slice(0,2)
			},
			// 跳转详情
			goDetails(id){
				console.log(id)
				uni.navigateTo({
					url:'/subPackage/NewsDetail/NewsDetail?id='+id
				})
			},
			// 跳转更多
			goMore(){
				uni.switchTab({
					url:'/pages/preOrder/preOrder'
				})
			},
			goDetail(id){
				console.log(id)
				uni.navigateTo({
					url:'/subPackage/PreOrderDetail/PreOrderDetail?id='+id
				})
			},
			// 跳转更多最新动态
			getMore(){
				uni.navigateTo({
					url:'/subPackage/RecentlyNews/RecentlyNews'
				})
			}
		},
		onLoad() {
			this.getSwiperList()
			this.getRecommendList()
			this.getNewsList()
		}
	}
</script>

<style lang="scss">
@import url('../../static/index.css');
.home{
	swiper{
		width: 100%;
		height: 360rpx;
		// border: 1px solid red;
		.swiper-item{
			// border: 1px solid #000;
			image{
				width: 100%;
			}
		}
	}
	.banner{
		display: flex;
		justify-content: space-around;
		margin: 30rpx;
		
	}
	.recommend{
		padding: 20rpx;
		.title-bar{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.list{
			display: flex;
			.rec-item{
				text-align: center;
				margin: 6rpx;
				image{
					width: 230rpx;
					height: 230rpx;
					border-radius: 30rpx;
				}
			}
		}
	}
	.recently{
		padding: 30rpx;
		.title-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.re-item{
			width: 100%;
			// border: 1px solid #000;
			display: flex;
			// flex-wrap: wrap;
			margin: 20rpx 0;
			image{
				width: 300rpx;
				height: 200rpx;
				margin-right: 20rpx;
				border-radius: 8rpx;
			}
			.right{
				width: 70%;
				.content{
					text-overflow: ellipsis;
					// text-overflow: -o;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}
				
			}
		}
		
	}
}
</style>
